<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Message } from 'element-ui'
import { getApprovalList } from '@/api/project-update/apply'
import { getLogContent } from '@/views/project-update/components/logContent'
import HistoryForm from '@/views/project-update/components/history-form.vue'
const props = defineProps({
  pkid: {
    type: String,
    default: '',
  },
})

const tableData = ref([])

const getTableData = () => {
  getApprovalList(props.pkid).then((res) => {
    if (res.success) {
      if (res.data.length) {
        tableData.value = res.data
      }
    } else {
      Message.error(res.message)
    }
  })
}

const time = ref('')

const formVisible = ref(false)

const handleCloseDialog = () => {
  formVisible.value = false
}

const handleViewHistory = (t) => {
  time.value = t
  formVisible.value = true
}

onMounted(() => {
  getTableData()
})
</script>

<template>
  <div class="apply-table">
    <el-table :data="tableData">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column prop="nodeName" label="流程节点">
        <template #default="scope">
          <template v-if="scope.row.processResults === '变更'">
            <div>{{ scope.row.nodeName }}</div>
            <el-button
              type="text"
              @click="handleViewHistory(scope.row.createTime)"
              >查看变更前版本>></el-button
            >
          </template>
          <template v-else>
            {{ scope.row.nodeName }}
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="createBy" label="操作人"></el-table-column>
      <el-table-column prop="createTime" label="操作时间"></el-table-column>
      <el-table-column prop="processResults" label="操作内容">
        <template #default="scope">
          <template v-if="scope.row.processResults === '变更'">
            <div class="change-content">
              <div
                class="change-content-item"
                v-for="(item, index) in getLogContent(scope.row.fromJson)"
                :key="index"
              >
                <span>{{ index + 1 + '、' + item.name + '：' }}</span>
                <span>{{ item.oldVal }}</span>
                <span>→</span>
                <span>{{ item.newVal }}</span>
              </div>
            </div>
          </template>
          <template v-else>
            {{ scope.row.processResults }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <history-form
      :time="time"
      :id="pkid"
      :visible="formVisible"
      @closeDialog="handleCloseDialog"
    />
  </div>
</template>

<style scoped lang="scss"></style>
